<template>
	<div class="memorialManage-container">
		<Header />
		<el-main class="memorialManage-main">
			<el-row class="container" :gutter="20" justify="space-between">
				<!-- 左侧菜单栏 -->
				<el-col :span="4" class="sidebar">
					<div class="menu-card">
						<div class="menu-title" @click="goToPath('userInfo')" :style="{color: viewMode === 'userInfo' ? '#F16C20' : ''}">管理中心</div>
						<div class="menu-item"><span>人物纪念馆</span></div>
						<div class="sub-menu" @click="goToPath('manageList')"  :style="{color: viewMode === 'manageList' || viewMode === 'articleList' || viewMode === 'leaveNoteList' || viewMode === 'graveyardBackground' || viewMode === 'memorialBackground' || viewMode === 'memorialEdit' || viewMode === 'articleEdit' || viewMode === 'leaveNoteEdit' ? '#F16C20' : ''}">管理纪念馆</div>
						<!-- <div class="sub-menu" @click="goToPath('doubleMemorial')">建立纪念馆</div> -->
						<div class="sub-menu" @click="goToPathCreateGraveyard()">建立纪念馆</div>
						<div class="menu-item"><span>集体祭祀</span></div>
						<div class="sub-menu" @click="goToPath('familyIndex')" :style="{color: viewMode === 'family' ? '#F16C20' : ''}">家族 | 宗祠 | 集体馆</div>
						<div class="menu-item"><span>集体馆（陵园）</span></div>
						<div class="sub-menu" @click="goToPath('cemeteryIndex')" :style="{color: viewMode === 'family' ? '#F16C20' : ''}">纪念集体馆管理</div>
						<div class="menu-item"><span>用户管理</span></div>
						<div class="sub-menu" @click="goToPath('userInfoEdit')"  :style="{color: viewMode === 'userInfoEdit' ? '#F16C20' : ''}">修改用户资料</div>
						<div class="sub-menu" @click="goToPath('payInfo')"  :style="{color: viewMode === 'payInfo' ? '#F16C20' : ''}">充值永恒币</div>
						<div class="menu-item" @click="goToHelpPage()">帮助中心</div>
						<div class="menu-item" @click="logout()">退出登录</div>
					</div>
				</el-col>

				<!-- 右侧内容区 -->
				<el-col :span="20" class="content">
					<router-view />
				</el-col>
			</el-row>
		</el-main>
		<Footer />
	</div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import useUserStore from '@/stores/modules/user'

const router = useRouter()
const userStore = useUserStore()

const goToHelpPage = () => {
	router.push('/article?pid=4')
}

// 退出登录
const logout = async () => {
	await userStore.logout()
	router.push('/')
}

// 去家族
const goToFamily = () => {
	router.push('/memorialManage/familyIndex')
}

const goToCemetery = () => {
	router.push('/memorialManage/cemeteryIndex')
}

const viewMode = ref('')
// 路由跳转
const goToPath = (path: string) => {
	viewMode.value = path
	router.push(`/memorialManage/${path}`)
}


const goToPathCreateGraveyard = () => {
	router.push('/createMemorial')
}
</script>
	
<style scoped>
.memorialManage-container {
	/* padding: 20px; */
	background: #f8f8f8;
}

.container {
	display: flex;
}

.sidebar {
	background: #fff;
}

.menu-card {
	padding: 10px 0;
}

.menu-title {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	margin-bottom: 10px;
	cursor: pointer;
}
.menu-title:hover {
	color: #F16C20;
}
.menu-item {
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px 0;
	cursor: default;
	font-weight: 500;
	border-top: #ccc 1px dotted;
	background: #F5F5F5;
    color: #666;
}

.sub-menu {
	padding-left: 12px;
	font-size: 14px;
	color: #666;
	margin: 5px 0;
	cursor: pointer;
}
.sub-menu:hover {
	color: #F16C20;
}

.content {
	padding-left: 0;
}

.memorialManage-main {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
</style>